import React, {useEffect, useState} from 'react';

export default () => {
  const [count, setCount] = useState(0);

  /** ↓ 你会发现这效果类似于使用setInterval,因为每次函数渲染,useEffect默认都会执行*/
  /*useEffect(() => {
    setTimeout(() => {
      setCount(x => x + 1);
    }, 1000);
  });*/

  /** 如果你想指定其调用次数,可以这样写*/
  /*useEffect(() => {
    setTimeout(() => {
      setCount(x => x + 1);
    }, 1000);
  }, [count<3?count:3]); // 总共会调用四次: (第一次)componentDidMount - (count为)0, 2 - 1, 3 - 2, 4 - 3, 5 - 3 ← 依然为3 浅比较 不再渲染*/

  useEffect(() => {
    setTimeout(() => {
      setCount(x => x + 1);
    }, 1000);
  }, [10086]); //会触发两次 渲染的count分别为0，1

  console.log('render');

  return <div>
    <p>{count}</p>
  </div>
};
